<template>
	
	<view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog placeholder="输入文件名"
			mode="input" title="重命名,不要输入扩展名"
			@confirm="confirm" :value="filename"  
			></uni-popup-dialog>
		</uni-popup>
		
		<view class="title">
			视频
		</view>
		<uni-swipe-action>
			<uni-swipe-action-item 
			v-for="(item,i) in list" :key="item.listID"
			:options="options" @click="itemClick($event, i)" 
			v-if="item.filetype=='video'"
			>
				<view  class="item">
					<view>
						<view class="floatLeft wid240">
							<image class="imageShow" :src="item.url" mode="aspectFill"></image>
						</view>
						<view class="floatLeft wid480">
							<text class="left_txt">{{item.filename}}</text>
						</view>
						<view class="rmFloat"></view>
					</view>
					<view>
						<text class="size_txt">{{numFilter(item.size/1024/1024)}}MB</text>
						<button size="mini" @click="play_video(i)">播放</button>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<view class="title">
			音乐
		</view>
		<uni-swipe-action>
			<uni-swipe-action-item 
			v-for="(item,i) in list" :key="item.listID" 
			:options="options" @click="itemClick($event, i)"
			 v-if="item.filetype=='audio'" >
				<view  class="item">
					<view>
						<text class="left_txt_music">{{item.filename}}</text>
					</view>
					<view>
						<text class="size_txt">{{numFilter(item.size/1024/1024)}}MB</text>
						<button size="mini" @click="play_music(i)">播放</button>
						<button  size="mini"  @click="add_music(i)">+</button>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>

	</view>
</template>

<script>
	// 输入框
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import uniPopupDialog from "@/components/uni-popup/uni-popup-dialog.vue"
	// 滑动操作
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	import common from '../../common/common.js';
	export default {
		components: {
			 uniPopup, uniPopupDialog,
			 uniSwipeAction,uniSwipeActionItem
		},
		data() {
			return {
				promptText: '输入新名字，不用后缀名',
				list: [],
				selectID: null,
				video_num: 0,
				audio_num: 0,
				filename: '',
				options: [
					{text: '重命名'},
					{text: '删除'}
				]
			}
		},
		onLoad() {
			uni.startPullDownRefresh({})
		},
		onShow() {
			uni.startPullDownRefresh({})
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			this.get_list();
		},
		methods: {
			itemClick(e, id){
				if(e.index == 0){
					this.rename_file(id)
				}else if (e.index==1){
					this.delete_file(id)
				}
			},
			numFilter(value) {
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			},
			showModal_to_login(){
				uni.showModal({
					title: '请先登陆',
					complete(e) {
						if(e.confirm){
							uni.navigateTo({
								url: '../login/login'
							})
						}else{
							this.list = []
						}
					}
				})
			},
			get_list() {  // 获取文件列表
				var userID = this.userID.id
				if (!userID) {
					this.showModal_to_login()
					return;
				}
				this.myReq({
					url: "get_list"
				}).then((data)=>{
					if (data.data) {
						this.list = data.data.list;
						for(let i=0; i<data.data.list.length; i++){
							this.list[i].url = 
								this.baseUrl+'get_image?userID='
									+ this.userID.id
									+ '&listID='
									+ this.list[i].listID;
						}
					}else{
						this.showModal_to_login()
					}
					uni.stopPullDownRefresh()
				})
			},
			delete_file(id) {   // 删除文件
				var listID=this.list[id].listID
				uni.showModal({
					content: '确认要删除吗？',
					complete: (res) => {
						if (res.confirm) {
							this.myReq({
								url: 'delete_file',
								method: "POST",
								data: JSON.stringify({
									'listID': listID
								})
							}).then((res)=>{
								if (res.data) {
									uni.showToast({
										title: '删除成功',
									});
									this.get_list()
								} else {
									uni.showToast({
										title: '删除失败失败失败!',
									})
								}
							})
						}
					}
				})
			},
			play_music(id) {
				var userID=this.userID.id
				var url= this.baseUrl+'get_file_data?userID='+userID+'&listID='+this.list[id].listID;
				common.tmp={
					'listID': this.list[id].listID,
					'src':url, 
					'name': this.list[id].filename,
					'type': 'audio'
				}
				uni.switchTab({
					url: '../play/play'
				})
			},
			add_music(id){
				var userID=this.userID.id
				var url= this.baseUrl+'get_file_data?userID='+userID+'&listID='+this.list[id].listID;
				var oneMusic = {
					'listID': this.list[id].listID,
					'src':url, 
					'name': this.list[id].filename,
					'type': 'audio'
				}
				common.musicList.push(oneMusic)
				this.push_to_playlist(common.musicList);
				uni.showToast({
					title:"添加成功",
					duration: 500
				})
			},
			play_video(id) {
				var userID=this.userID.id
				var url= this.baseUrl+'get_file_data?userID='+userID+'&listID='+this.list[id].listID;
				common.tmp={'src':url, 'name': this.list[id].filename,'type':'video' }
				uni.switchTab({
					url: '../play/play'
				})
			},
			rename_file(id) {
				this.selectID=this.list[id].listID;
				this.filename=this.list[id].filename
				this.$refs.popup.open()
			},
			confirm(done,value) {
				if (value.trim() == '') {
					console.log('你还未输入');
					return;
				} else {
					this.myReq({
						url: 'rename_file',
						method:'POST',
						data: JSON.stringify({
							'listID': this.selectID,
							'filename': value.trim()
						}),
					}).then((res)=>{
						if(res.data){
							this.get_list();
							uni.showToast({
								title:'修改成功'
							})
						}else{
							uni.showToast({
								title:'修改失败失败失败'
							})
						}
					})
					done()
				}
			},
		}
	}
</script>

<style>
	.title {
		background-color: #4CD964;
		text-align: center;
		margin-bottom: 0.2rem;
	}

	button {
		background-color: #9BCD9B;
		margin: 0.1rem 0.5rem;
		border-radius: 1rem;
		float: right;
	}

	.item {
		width: 750rpx;
		border: 0.1rem solid #007AFF;
		border-radius: 1rem;
		margin-bottom: 0.5rem;
		background-color: #B0E2FF;
	}

	.rmFloat {
		clear: both;
	}
	.floatLeft{
		float: left;
	}
	.wid240{
		width: 250rpx;
	}
	.wid480{
		width: 400rpx;
	}
	.imageShow{
		width: 240rpx; 
		height: 150rpx;
	}
	.left_txt{
		display: inline;
		font-size: 50rpx;
	}
	.left_txt_music{
		width: 690rpx;
		display: block;
		padding-left: 1rem;
		box-sizing: border-box;
		font-size: 50rpx;
		box-sizing: border-box;
	}
	.size_txt{
		margin-left: 1rem;
		padding-top: 0.5rem;
		font-size: 28rpx;
		color: #808080;
	}

</style>
